<template>
  <view>
    <Search />
    <Tabs :tabtext="tabtext" @active="changePage" />

    <Goods v-for="item in goods_list" :key="item.goods_id" :goodsInfo="item" />

    <view class="footer" v-if="!canload">--------已经到底部了--------</view>
  </view>
</template>

<script>
import Goods from "@/components/goods/index";
import Search from "@/components/search/index";
import Tabs from "@/components/tabs/index";

import { goodsList } from "@/api/goodsList";
export default {
  components: {
    Goods,
    Search,
    Tabs,
  },
  data() {
    return {
      tabtext: [
        { id: 0, name: "综合" },
        { id: 1, name: "其他" },
        { id: 2, name: "88" },
      ],
      goods_list: [],
      pagenum: 1,
      pagesize: 10,
      cid: "",
      canload: true,
    };
  },
  onLoad(query) {
    this.cid = query.cid;
    this.goodsDetail();
  },
  onReachBottom() {
    console.log(this.canload);
    if (this.canload) {
      this.pagenum++;
      this.goodsDetail();
    }
  },
  async onPullDownRefresh() {
    this.pagenum = 1;
    this.goods_list = [];
    this.canload = true;
    await this.goodsDetail();
    uni.stopPullDownRefresh();
  },
  methods: {
    changePage(id) {
      console.log(id, "parant");
    },
    async goodsDetail() {
      uni.showLoading({
        title: "加载中",
      });
      const data = {
        cid: this.cid,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      };
      const res = await goodsList(data);
      this.goods_list = [...this.goods_list, ...res.data.message.goods];
      if (this.goods_list.length === res.data.message.total) {
        this.canload = false;
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  text-align: center;
  color: #e2e2e2;
  font-size: 12rpx;
}
</style>